<template>
	<view class="container bg-white">	
		<!--申请-->
		<uni-forms class="m-t30" ref="formData" :modelValue="formData" label-width="105px">					
			<view class="m-b30 fs16 fw600 text-center">
				申请开票
			</view>
			<view class="m-b20">
				<uni-forms-item label="发票类型" required name="header_type">
					<uni-segmented-control :current="formData.invoice_type" :values="invoiceItems" @clickItem="clickInvoiceType" styleType="button">
					</uni-segmented-control>
				</uni-forms-item>
			</view>
			<view class="m-b20">
				<uni-forms-item label="抬头类型" required name="header_type" v-if="formData.invoice_type == 0">
					<uni-segmented-control :current="formData.header_type" :values="headerItems" @clickItem="clickHeaderType" styleType="button">
					</uni-segmented-control>
				</uni-forms-item>
			</view>
			<view class="m-b20">
				<uni-forms-item label="发票抬头" required name="header">
					<uni-easyinput type="input" v-model="formData.header" placeholder="请输入发票抬头" />
				</uni-forms-item>
			</view>
			<view class="m-b20">
				<uni-forms-item label="开票金额" required name="money">
					<uni-easyinput type="text" v-model="formData.money" placeholder="请输入开票金额" />
				</uni-forms-item>
			</view>	
			<view class="m-b20">
				<uni-forms-item label="开票类型" required name="money_type">
					<uni-data-select v-model="formData.money_type" :localdata="moneyTypeList" label="请选择" ></uni-data-select>
				</uni-forms-item>
			</view>		
			<view class="m-b20">
				<uni-forms-item label="申请图片" required name="applyImages">
					<view class="imgs uni-flex justify-left flex-auto-row" v-if="images.length>0">
						<view v-for="(item,ikey) in images" class="imgs_item">
							<image class="bg-grayf5" :src="item" mode="aspectFill" @click="viewImage(images, ikey)"></image>
							<uni-icons class="imgs_remove" type="closeempty" size="10" color="#ffffff" @click="imageRemove(ikey)"></uni-icons>
						</view>
					</view>
					<view class="imgs_item bg-grayf5 uni-flex justify-center align-center flex-column text-center m-t20 m-b20" @click="upload">
						<view><uni-icons type="plusempty" size="25"color="#999999"></uni-icons></view>
						<view>添加图片</view>
					</view>
				</uni-forms-item>
			</view>		
			<view class="m-b20">
				<uni-forms-item label="开票内容" name="title">
					<view class="height-37">{{formData.title}}</view>
				</uni-forms-item>
			</view>			
			<view class="m-b20">
				<uni-forms-item label="项目名称" name="service_name">
					<view class="height-37">{{serviceInfo.Place_b}}</view>
				</uni-forms-item>
			</view>			
			<view class="m-b20">
				<uni-forms-item label="项目地址" name="service_address">
					<view class="height-37">{{serviceInfo.Place_b}}</view>
				</uni-forms-item>
			</view>			
			<template v-if="formData.header_type == 0 && formData.invoice_type == 0">
				<view class="m-b20">
					<uni-forms-item label="身份证号" required name="header">
						<uni-easyinput type="input" v-model="formData.card_no" placeholder="请输入身份证号" />
					</uni-forms-item>
				</view>	
			</template>
			<template v-else-if="formData.header_type == 1 || formData.invoice_type == 1">
				<view class="m-b20">
					<uni-forms-item label="单位税号" required name="no">
						<uni-easyinput type="input" v-model="formData.no" placeholder="请输入单位税号" />
					</uni-forms-item>
				</view>
				<view class="m-b20">	
					<uni-forms-item label="电话" name="phone">
						<uni-easyinput type="input" v-model="formData.phone" placeholder="请输入电话" />
					</uni-forms-item>
				</view>		
				<view class="m-b20">
					<uni-forms-item label="注册地址" name="address">
						<uni-easyinput type="input" v-model="formData.address" placeholder="请输入注册地址" />
					</uni-forms-item>
				</view>		
				<view class="m-b20">
					<uni-forms-item label="银行支行" name="bank_address">
						<uni-easyinput type="input" v-model="formData.bank_address" placeholder="请输入银行支行" />
					</uni-forms-item>
				</view>
				<view class="m-b20">
					<uni-forms-item label="银行卡号" name="bank_no">
						<uni-easyinput type="input" v-model="formData.bank_no" placeholder="请输入银行卡号" />
					</uni-forms-item>
				</view>		
			</template>	
			<view class="m-b20">
				<uni-forms-item label="邮箱地址" required name="mail_email">
					<uni-easyinput type="input" v-model="formData.mail_email" placeholder="请输入邮箱地址" />
				</uni-forms-item>
			</view>	
			<view class="m-b20">	
				<uni-forms-item label="收货人名称" required name="mail_name">
					<uni-easyinput type="input" v-model="formData.mail_name" placeholder="请输入收货人名称" />
				</uni-forms-item>
			</view>	
			<view class="m-b20">
				<uni-forms-item label="收货人电话" required name="mail_phone">
					<uni-easyinput type="input" v-model="formData.mail_phone" placeholder="请输入收货人电话" />
				</uni-forms-item>
			</view>	
			<view class="m-b20">
				<uni-forms-item label="收货人地址" required name="mail_address">
					<uni-easyinput type="input" v-model="formData.mail_address" placeholder="请输入收货人地址" />
				</uni-forms-item>
			</view>	
			<view class="m-b20">
				<uni-forms-item label="填单人" required name="fill_name">
					<uni-easyinput type="input" v-model="formData.fill_name" placeholder="请输入填单人" />
				</uni-forms-item>
			</view>	
		</uni-forms>
		<button class="round-40 bg-blue text-white fs14 m-t30 m-b30 m-b10" @click="submitForm">提交</button>
	</view>
</template>

<script>
import { invoiceInfo, invoiceApply, invoiceCancel } from '@/api/invoice.js';
import { getCrmServiceInfo, apply, getServiceInfo, applyMoney } from '@/api/project.js';
import urlConfig from '@/common/config.js';
import { uploadImage } from '@/common/js/upload.js'
export default {
	data() {
		return {
			Sub_dh: "",				//工地编码
			serviceInfo: "",		//工地信息
			stateList: ["审核中","审核通过","审核拒绝","已发送","已取消"],		//申请状态
			info: {},		//申请信息
			formData: {	// 表单数据
				invoice_type: 0,	//开票类型【1-普通,2-专票】
				header_type: 0,		//抬头类型【1-个人,2-企业】
				header: "",			//抬头
				no: "",				//税号
				address: "",		//注册地址
				phone: "",			//注册手机
				bank_address: "",	//银行支行
				bank_no: "",		//银行卡号
				money: "",			//申请开票金额
				money_type: "",		//申请开票类型
				applyImages: [],	//申请凭证
				title: "装饰工程服务",			//开票内容
				mail_email: "",		//收获邮箱
				mail_name: "",		//收货人
				mail_phone: "",		//手机号
				mail_address: "",		//收货地址
				card_no: "",		//个人身份证号
				fill_name: "",		//填单人
			},
			images:[],
			invoiceItems: ['普通发票', '增值税专用发票'],
			headerItems: ['个人', '企业'],
			moneyTypeList:[
				{ value: 1, text: "定金" },
				{ value: 2, text: "首期款" },
				{ value: 3, text: "二期款" },
				{ value: 6, text: "首期+二期" },
				{ value: 4, text: "三期款" },
				{ value: 5, text: "尾期款" },
				{ value: 7, text: "完工" }
			]
		}
	},
	onLoad(e) {
		this.Sub_dh = e.Sub_dh ? e.Sub_dh : ""
		if(e.content) {
			this.info = JSON.parse(e.content)
			console.log("this.info", this.info)
			this.images = this.info.applyImages ? this.info.applyImages : []
			this.formData = {
				invoice_type: parseInt(this.info.invoice_type - 1),	//开票类型【1-普通,2-专票】
				header_type: parseInt(this.info.header_type - 1),		//抬头类型【1-个人,2-企业】
				header: this.info.header,			//抬头
				no: this.info.no,				//税号
				address: this.info.address,		//注册地址
				phone: this.info.phone,			//注册手机
				bank_address: this.info.bank_address,	//银行支行
				bank_no: this.info.bank_no,		//银行卡号
				money: this.info.money,		//申请开票金额
				money_type: this.info.money_type,		//申请开票类型
				applyImages: this.images,	//申请凭证
				title: this.info.title,			//开票内容
				mail_email: this.info.mail_email,		//收获邮箱
				mail_name: this.info.mail_name,		//收货人
				mail_phone: this.info.mail_phone,		//手机号
				mail_address: this.info.mail_address,		//收货地址
				card_no: this.info.card_no,		//个人身份证号		
				fill_name: this.info.fill_name,	//填单人
			}
		}
		this.getInfo();
	},
	methods: {
		/**
		 * 获取工地详情
		 */
		getInfo(){
			let that = this;
			getCrmServiceInfo({Sub_dh: that.Sub_dh}).then((res) => {
				if(res.code == 0){
					that.serviceInfo = res.data.detail
				}
			})			
		},
		/**
		 * 提交开票申请
		 */
		submitForm() {
			let that = this;
			let params = this.formData;
			if(params.header == ""){
				uni.showToast({ title: "请输入开票抬头", icon: 'none' });
				return;				
			}
			if(params.money == "" || parseInt(params.money) <= 0) {
				uni.showToast({ title: "请输入开票金额", icon: 'none' });
				return;					
			}
			if(params.money_type == "" || parseInt(params.money_type) <= 0) {
				uni.showToast({ title: "请选择开票类型", icon: 'none' });
				return;					
			}
			if(params.applyImages && params.applyImages.length == 0) {
				uni.showToast({ title: "申请图片", icon: 'none' });
				return;					
			}
			if(params.invoice_type == 0 && params.header_type == 0 && params.card_no == "") {
				uni.showToast({ title: "请输入身份证号", icon: 'none' });
				return;		
			}
			if(params.header_type == 1 && params.no == "") {
				uni.showToast({ title: "请输入税号", icon: 'none' });
				return;		
			}
			if(params.mail_email == "") {
				uni.showToast({ title: "请输入邮箱地址", icon: 'none' });
				return;					
			}
			if(params.mail_name == "") {
				uni.showToast({ title: "请输入收货人姓名", icon: 'none' });
				return;					
			}
			if(params.mail_phone == "") {
				uni.showToast({ title: "请输入收货人手机号", icon: 'none' });
				return;					
			}
			if(params.mail_address == "") {
				uni.showToast({ title: "请输入收货人收货地址", icon: 'none' });
				return;					
			}
			if(params.fill_name == "") {
				uni.showToast({ title: "请输入填单人", icon: 'none' });
				return;					
			}			
			params.sub_dh = that.serviceInfo.Sub_Dh;
			params.invoice_type = parseInt(params.invoice_type)==0 ? 1 : 2;
			if(params.invoice_type == 2) {
				params.header_type = 2
			}else {
				params.header_type = parseInt(params.header_type)==0 ? 1 : 2;				
			}
			invoiceApply(params).then(res => {
				if(res.code == 0) {
					uni.showToast({ title: '申请成功', icon: 'none' })
					uni.navigateBack({
						delta: 1,
						success: () => {
							var pages = getCurrentPages();
							var prePage = pages[pages.length - 1] //上一个页面
							prePage.$vm.getList()
						}
					})
				}
			})
		},
		clickHeaderType(e) {
			this.$set(this.formData, "header_type", e.currentIndex)
		},
		clickInvoiceType(e) {	
			this.$set(this.formData, "invoice_type", e.currentIndex)
		},		
		/**
		 * 上传图片
		 */
		upload(){
			let that = this
			uploadImage(9).then(res => {
				if(res) {					
					that.images = that.images.concat(res)
					that.$set(that.formData, "applyImages", that.images)
				}
			})
		},
		/**
		 * 删除图片
		 */
		imageRemove(index){
			this.images.splice(index, 1);
			this.$set(this.formData, "applyImages", this.images);
		},
		/**
		 * 查看大图
		 */
		viewImage(imgs,index){
			uni.previewImage({
				current: index,
				urls: imgs
			})
		},
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	padding: 30rpx 50rpx;
}
.exam_state {
	text-align: center;
}
.info_row {
    position: relative;
    display: flex;
    flex-direction: row;
	font-size: 28rpx;
	line-height: 72rpx;
	margin-bottom: 20rpx;
}
.info_row_label {
	color: #606266;
	width: 210rpx;
	padding-right: 24rpx;
}
.info_row_value {
	position: relative;
	flex: 1;
	box-sizing: border-box;
	flex-direction: row;
}
</style>